<style lang="scss" scoped>
@import './index.scss';
</style>

<template>
  <div class="collectBox">
    <div class="top">
      <van-nav-bar title="我的收藏" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="navs">
      <ul>
        <li
          v-for="(v, i) in collectionList"
          :key="i"
          :class="active == v.id ? 'active' : ''"
          @click="handletab(v.id)"
        >
          {{ v.title }}
        </li>
      </ul>
    </div>
    <div v-if="active === 0">
      <div style="height: 350px">
        <dl v-for="(v, i) in FindInforData" :key="i" class="dl1" @click="onFindInfor(v.id)">
          <dt>
            <img :src="v.thumbnail" alt="" />
          </dt>
          <dd>
            <h4>{{ v.title }}</h4>
          </dd>
        </dl>
      </div>
    </div>
    <div v-if="active === 1">
      <div v-if="flag" v-for="(item, index) in videoData" :key="index">
        <video
          :src="item.originalUrl"
          autoplay
          muted
          preload="auto"
          class="fullscreen-video"
        ></video>
        <el-button
          type="primary"
          size="large"
          style="width: 100%; margin-top: 20px"
          @click="() => delecollect(item.videoId)"
          >取消收藏</el-button
        >
      </div>
      <div v-else="!flag">
        <h3>暂未收藏视频</h3>
      </div>
    </div>
    <div v-if="active === 2">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
        <div v-for="(v, i) in binData" :key="i">
          <div class="listItem" @click="() => godetail(v.id)">
            <div class="title">
              <h3>{{ v.title }}</h3>
              <div class="HB">
                <img src="../../assets/images/image/hdpi/h_currency.png" alt="" />
                <span>{{ v.amount }}</span>
              </div>
            </div>
            <p class="time">{{ v.releaseTime }}</p>
            <div class="detail">{{ v.detail }}</div>
            <ul class="collect">
              <li>
                <span>建议</span>
                <span>{{ v.commentNum }}</span>
              </li>
              <li>
                <span>收藏</span>
                <span>{{ v.collectionNum }}</span>
              </li>
            </ul>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  cancelVideoCollection,
  findUserSickCollectionList,
  findVideoCollectionList,
  getUserInfoCollectionList
} from '../../api/index'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const page = ref(1)
const count = ref(5)
const router = useRouter()
// const plateId = ref(1)
// 健康咨询列表定义sessionId
// 定义下标
const FindInforData:any = ref({})
const godetail = (id: number) => {
  router.push(`/detail/${id}`)
}
const loading = ref(false)
const finished = ref(false)
const flag = ref(false)
const active = ref(0)
// 收藏tab
const videoData:any = ref({})
const collectionList = ref([
  {
    title: '健康咨询',
    id: 0
  },
  {
    title: '健康视频',
    id: 1
  },
  {
    title: '病友圈',
    id: 2
  }
])

const userId = ref(parseInt(localStorage.getItem('userId') as string))
const binData:any = ref({})
console.log(userId.value)
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
console.log(sessionId.value)

// 异步获取数据的函数
const findVideoCollectionList1 = async () => {
  try {
    const res = await findVideoCollectionList(userId.value, sessionId.value, {
      page: page.value,
      count: count.value
    })
    console.log('111111', res)
    console.log('收藏视频', res.data.result)
    if (res.data.result.length == 0) {
      flag.value = false
    } else {
      flag.value = true
    }
    videoData.value = res.data.result
    console.log(videoData.value)
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}
// 调用获取数据的函数
findVideoCollectionList1()
const findUserSickCollectionList1 = async () => {
  try {
    const res = await findUserSickCollectionList(userId.value, sessionId.value, {
      page: page.value,
      count: count.value
    })
    console.log('用户收藏病友圈列表', res)
    console.log(res.data.result)
    loading.value = true // 开始加载更多数据
    finished.value = res.data.result.length < 10
    binData.value = res.data.result
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}
// 调用获取数据的函数
findUserSickCollectionList1()

const delecollect = async (id: number) => {
  const res = await cancelVideoCollection(userId.value, sessionId.value, {
    videoId: id
  })
  console.log(res)
  ElMessage.success('取消收藏成功')
}
// 异步获取数据的函数
const getfindUserInfo1 = async () => {
  try {
    const res = await getUserInfoCollectionList(userId.value, sessionId.value, {
      page: page.value,
      count: count.value
    })
    console.log('收藏咨询', res.data.result)
    FindInforData.value = res.data.result
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}
// 调用获取数据的函数
getfindUserInfo1()

// 返回上一页
const onClickLeft = () => history.back()
// 点击切换
const handletab = (id: number) => {
  active.value = id
}
const onFindInfor=(id:any)=>{
  console.log(id);
  router.push(`/informationDetail/${id}`)
  
  
}
// console.log(handletab);
</script>
